<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<h1>EventSource</h1>
<div>
    <button onclick="startConnect()">开始</button>
    <button onclick="stopConnect()">停止</button>
</div>

<div id="box"></div>
<script>
let source, box = document.querySelector('#box')

function startConnect() {
  source = new EventSource("/demo/connectSee");
  source.addEventListener('open', function () {
    console.log('开启了');
  })
  source.addEventListener('abc', e => {
    console.log('e', e);
    let data = JSON.parse(e.data);
    box.innerHTML += `<p>${data.time}</p>`;
  })
}

function stopConnect() {
  if (source) {
    source.close()
    box.innerHTML += "停止成功！"
  }
}
</script>
</body>
</html>
